<template>
  <div>
    <el-row class="header">
      <el-col :span="4">&nbsp;&nbsp;&nbsp;&nbsp;</el-col>
      <el-col :span="20">
        <el-form ref="form" :inline="true" :model="gnTable" size="small">
          <el-form-item v-for="tag in gnTable.tags" :key="tag.key" :label="tag.label">
            <el-select v-model="tag.value" placeholder="请选择">
              <el-option
                v-for="item in tag.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label>
            <el-input v-model="gnTable.keywords" placeholder="关键字" clearable></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4">
        <el-menu>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu>
      </el-col>
      <el-col :span="20">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <json-viewer :value="props.row" copyable boxed></json-viewer>
            </template>
          </el-table-column>
          <el-table-column prop="ActionKey" label="操作名称" />
          <el-table-column prop="Url" label="请求地址" />
          <el-table-column prop="RequestBody" label="请求" />
          <el-table-column prop="ResponseBody" label="响应" />
          
          <el-table-column prop="ElapsedTime" label="耗时" />
          <el-table-column prop="CreateTime" label="创建时间" />
          
        </el-table>
        <el-pagination
          @current-change="currentChange"
          background
          layout="prev, pager, next"
          :current-page="pagination.pageIndex"
          :page-size="pagination.pageSize"
          :total="pagination.total"
        ></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import HttpApiLogApi from "@/api/httpApiLogApi.js";
export default {
  mounted() {
    //  HttpApiLogApi.getSystemConfig(123);

    //获取数据

    this.getTableDataTest();
  },
  computed: {
    queryParams() {
      let queryString = {
        keywords: this.gnTable.keywords,
        pageIndex: this.pagination.pageIndex,
        pageSize: this.pagination.pageSize
      };
      this.gnTable.tags.forEach(element => {
        queryString[element.prop] = element.value;
      });
      return queryString;
    }
  },
  data() {
    return {
      gnTable: {
        name: "请求日志",
        url: "http://localhost:36766/api/HttpApiLog/GetPaginationData",
      
        tags: [
          {
            label: "租赁状态",
            prop: "rentStatus",
            value: "",
            options: [
              {
                label: "全部",
                value: ""
              },
              {
                label: "在租",
                value: "2"
              },
              {
                label: "待搬入",
                value: "3"
              },
              {
                label: "合同逾期",
                value: "4"
              }
            ]
          },
          {
            label: "请求方法",
            prop: "httpMethod",
            value: "GET",
            options: [
              {
                label: "GET",
                value: "GET"
              },
              {
                label: "POST",
                value: "POST"
              },
              {
                label: "待备案",
                value: "4"
              },
              {
                label: "待缴费",
                value: "5"
              }
            ]
          }
        ]
      },

      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        }
      ],
      pagination: {
        pageIndex: 1,
        pageSize: 10,
        total: 0
      }
    };
  },
  methods: {
    getTableData() {
      HttpApiLogApi.getData(this.gnTable.url, this.queryParams).then(r => {
        this.tableData = r.data.rows;
        this.pagination.total = r.data.total;
      });
    },
    getTableDataTest() {
      HttpApiLogApi.getData("/api/config/DbLog/GetData", this.queryParams).then(
        r => {
          this.tableData = r.data.rows;
          this.pagination.total = r.data.total;
        }
      );
    },
    search() {
      this.pagination.pageIndex = 1; //搜索后重置页码
      this.getTableData();
    },
    currentChange(index) {
      this.pagination.pageIndex = index;
      this.getTableData();
    }
  }
};
</script>
<style lang="less" scoped>
.header {
  margin: 15px 0;
}
</style>